<script setup lang="ts">
import type { HomeSection } from '@/constants/HOME'
import RankingPanel from './panels/RankingPanel.vue'
import ChatListPanel from './panels/ChatListPanel.vue'
import NoticePanel from './panels/NoticePanel.vue'
import FaqPanel from './panels/FaqPanel.vue'


const current = defineModel<HomeSection>({ required: true })
</script>

<template>
  <section class="right">
    <RankingPanel v-if="current === 'ranking'" />
    <ChatListPanel v-else-if="current === 'chat'" />
    <NoticePanel v-else-if="current === 'notice'" v-model="current" />
    <FaqPanel v-else-if="current === 'faq'" v-model="current" />
    <div v-else class="placeholder">이 모듈은 임시이며, 추후 완성 예정: {{ current }}</div>

  </section>
</template>

<style scoped>
.right {
  flex: 1;
  padding: var(--space-5);
  overflow: auto;
  background: var(--color-surface);
  color: var(--color-text);
  min-height: 0;
}

.placeholder {
  height: 200px;
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  color: var(--color-text-muted);
  font-size: 16px;
  font-weight: 500;
}
</style>
